<template>
<div> 
  <div class="wrap w-gy detail" v-show="!showAgree">
    <header>
        <img onclick="javascript :history.back(-1);" src="@/assets/img/l_b.png" alt="" />
        供应商注册
    </header>
    <div class="content">
        <p class="tit">请提交注册信息</p>
        <form action="">
            <div class="group" v-for="(item,index) in msg" :key="index">
                <label>
                    {{item.label}}
                    <input @blur="getVal" :type="item.type" :placeholder="item.placehold" :id="item.id" :data-index="index" value=""/>
                </label>
            </div>
            
            <div class="group content-block">
                <label>
                    所在省市
                    <input :value="address_txt" @click="showAddressPicker" type="text" readonly placeholder="请选择" />
                </label>
            </div>
            <div class="group" v-for="(item,index) in msg2" >
                <label>
                    {{item.label}}
                    <input @blur="getVal2" :type="item.type" :placeholder="item.placehold" :id="item.id" :data-index="index" value=""/>
                </label>
            </div>
            
            <div class="group group-img">
                <label>
                    营业执照扫描件
                </label>
                    <cube-upload
                      :action="action"
                      :simultaneous-uploads="1"
                      :max="1"
                      @files-added="filesAdded"
                      @file-success="yingyeSuccess"
                      @file-removed="delImg('yingyeImg')" />
            </div>
            <div class="group group-img">
                <label>
                    法定代表人身份证(正面)
                </label>
                    <cube-upload
                      :action="action"
                      :simultaneous-uploads="1"
                      :max="1"
                      @files-added="filesAdded"
                      @file-success="zhengSuccess"
                      @file-removed="delImg('zhengImg')" />
            </div>
            <div class="group group-img">
                <label>
                    法定代表人身份证反面）
                </label>
                    <cube-upload
                      :action="action"
                      :simultaneous-uploads="1"
                      :max="1"
                      @files-added="filesAdded"
                      @file-success="fanSuccess" 
                      @file-removed="delImg('fanImg')"/>
            </div>
            <div class="group group-img">
                <label>
                    医疗器械经营许可证/第二类医疗器械经营备案证
                </label>
                    <cube-upload
                      :action="action"
                      :simultaneous-uploads="1"
                      :max="2"
                      @files-added="filesAdded"
                      @file-success="xvkeSuccess" 
                      @file-removed="delImg('xvkeImg')"/>
            </div>
            <div class="ok">
                <input type="checkbox" checked @click="checkboxChange"/>
                <p>注册代表同意
                    <span @click="showAgree = !showAgree">
                    供应商注册协议>
                    </span>
                </p>
                <button type="button" @click="submit">立即认证</button>
            </div>

        </form>
    </div>
</div>

      <div class="wrap w-xieyi detail" v-show="showAgree">
          <header>
              <img @click="showAgree = !showAgree" src="@/assets/img/l_b.png" alt="" />
              供应商注册协议
          </header>
          
          <div class="box">
              <p>
                  一. 填写会员资料<br /><br />
                  &ensp;&ensp;&ensp;1、提供真实、准确的用户资料。<br /><br />
                  &ensp;&ensp;&ensp;2、 正式会员资料有任何变动时，必须及时更新并通知本站。
              </p>
              <br />
              <p>
                  二. 协议条款进行修改。<br /><br />协议条款一旦发生变动，我们将会及时通知用户。如果用户不同意所改动的内容，用户可以随时中止协议，并自行退出。不承担任何责任。
              </p>
              <br />
              <p>
                  三.收费说明如下：<br /><br />
                  &ensp;&ensp;&ensp;1、收取金额。向中标人收取比例为中标交易金额0.7%的技术服务费。供应商中标后无法按申购方要求履约，需支付技术服务费并承担相关责任。<br /><br />
                  &ensp;&ensp;&ensp;2、结算方式。<br />
                  &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;(A)累计中标金额每达到10万元以上（含10万元）的收取一次；<br />
                  &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;(B)每三个月清结一次；<br /><br />
                  &ensp;&ensp;&ensp;3、开票方式：由于交易金额比较零散，为方便管理，平台原则上采用集中开票模式，通常按月/季度累计开出。企业付款后如急需发票者，可及时登陆平台申请。
              </p>
          </div>

      </div>

</div>
</template>
<script>
import Bartab from '@/components/Bartab.vue'
import { provinceList, cityList, areaList } from '@/area'
const addressData = provinceList
addressData.forEach(province => {
  province.children = cityList[province.value]
  province.children.forEach(city => {
    city.children = areaList[city.value]
  })
})
export default {
   data() {
    return {
        showAgree:false,
        action: {
            target: this.api_url+'/index/upfile/',
            fileName:'fileData',
            // prop: 'base64Value'
        },

        msg: [{  //  用户名至企业名称循环数据
          label: '用户名',
          id: 'user_name',
          type: 'text',
          placehold: '大小写字母数字5-15位',
          bindinput: 'getVal',
          val: '',
          reg: '^[A-Za-z0-9]{5,15}$'
        },{
          label: '密码',
          id: 'user_pass',
          type: 'password',
          placehold: ' 6~18 大小写字母数字',
          bindinput: 'getVal',
          val: '',
          reg: '^[a-zA-Z0-9]{6,18}$'
        }, {
          label: '确认密码',
          id: 'aginPwd',
          type: 'password',
          placehold: '两次密码需一致',
          bindinput: 'getVal',
          val: '',
          reg: '^[a-zA-Z0-9]{6,18}$'
        }, {
          label: '企业名称',
          id: 'company_name',
          type: 'text',
          placehold: '请填写',
          bindinput: 'getVal',
          val: '',
          reg: '^[\u4E00-\u9FA5A-Za-z0-9_]{2,40}$'
        }],

        province_id: '',
        city_id: '',
        area_id: '',
        address_txt:'',
        checked:true,

        msg2: [{  // 通讯地址至邮箱循环数据
          label: '通讯地址',
          id: 'post_addr',
          type:'text',
          placehold: '请填写',
          bindinput: 'getVal2',
          val: '',
          reg: '^[\\S]{3,50}$'
        },{
          label: '营业执照号',
          id: 'business_license_num',
          type: 'text',
          placehold: '请填写',
          bindinput: 'getVal2',
          val: '',
          reg: '^\\w+$'
        },{
          label: '法人姓名',
          id: 'legal_person',
          type: 'text',
          placehold: '请填写',
          bindinput: 'getVal2',
          val: '',
          reg: '^[\u4E00-\u9FA5A-Za-z0-9]{2,40}$'
        },{
          label: '法人身份证号',
          id: 'legal_person_no',
          type: 'text',
          placehold: '请填写',
          bindinput: 'getVal2',
          val: '',
          reg: '(^\\d{15}$)|(^\\d{18}$)|(^\\d{17}(\\d|X|x)$)'
        },{
          label: '邮箱',
          id: 'user_email',
          type: 'text',
          placehold: '请填写',
          bindinput: 'getVal2',
          val: '',
          reg: '^\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*$'
        }],
        //图片列表
          yingyeImg: '',
          zhengImg: '',
          fanImg: '',
          xvkeImg: '',
          xvkeImg1:'',
      
    }
  },
  methods: {
    submit:function(){
        let that = this;
        let userInfo = this.getUserInfo()
        let arr = this.msg;
        let arr1 = this.msg2;
        let formData ={}
        for(let i=0;i<arr.length;i++){
          formData[arr[i].id] =arr[i].val;

          if(arr[i].val === ""){
            this.$createDialog({
              type: 'alert',
              title: '提示',
              content: `请输入${arr[i].label}`,
              icon: ''
             }).show()
            return false;
          }else if(new RegExp(arr[i].reg).test(arr[i].val) != true){
            this.$createDialog({
              type: 'alert',
              title: '提示',
              content: `${arr[i].label}格式不正确`,
              icon: ''
             }).show()
            return false;
          }
        }

        for (var i = 0; i < arr1.length; i++) {
          formData[arr1[i].id] =arr1[i].val;
          if (arr1[i].val === "") {
            this.$createDialog({
              type: 'alert',
              title: '提示',
              content: `请输入${arr1[i].label}`,
              icon: ''
             }).show()
            return false;
          }else if(new RegExp(arr1[i].reg).test(arr1[i].val) !=true){
            this.$createDialog({
              type: 'alert',
              title: '提示',
              content: `${arr1[i].label}格式不正确`,
              icon: ''
             }).show()
            return false;
          }
        }
        if(arr[1].val != arr[2].val){
            this.$createDialog({
              type: 'alert',
              title: '提示',
              content: '两次密码不一致',
              icon: ''
             }).show()
          return false;
        }
        if(this.province_id == "" || this.city_id == "" ||this.area_id == ""){
            this.$createDialog({
              type: 'alert',
              title: '提示',
              content: '请选择省市',
              icon: ''
             }).show()
          return false;
         }
        if(!this.checked){
            this.$createDialog({
              type: 'alert',
              title: '提示',
              content: '需同意注册供应商协议',
              icon: ''
             }).show()
          return false;
        }

        if(this.yingyeImg == ''){
            this.$createDialog({
              type: 'alert',
              title: '提示',
              content: '请上传营业执照扫描件',
              icon: ''
             }).show()
             return false;
        }
         if(this.zhengImg == ''){
            this.$createDialog({
              type: 'alert',
              title: '提示',
              content: '请上传法人身份证(正面)',
              icon: ''
             }).show()
             return false;
        } 
         if(this.fanImg == ''){
            this.$createDialog({
              type: 'alert',
              title: '提示',
              content: '请上传请上传法人身份证(反面)',
              icon: ''
             }).show()
             return false;
        } 
         if(this.xvkeImg == ''){
            this.$createDialog({
              type: 'alert',
              title: '提示',
              content: '请上传医疗器械经营许可证/\n第二类医疗器械经营备案证',
              icon: ''
             }).show()
             return false;
        } 
        //拼接  省市区，企业扫描件 用户信息
        formData['province_id'] = this.province_id;
        formData['city_id'] = this.city_id;
        formData['area_id'] = this.area_id;
        formData['yingyeImg'] = this.yingyeImg;
        formData['zhengImg'] = this.zhengImg;
        formData['fanImg'] = this.fanImg;
        formData['xvkeImg'] = this.xvkeImg;
        if(this.xvkeImg1){
              formData['xvkeImg1'] = this.xvkeImg1;
        }
        formData['user_token'] = userInfo.user_token;
        formData['user_id'] = userInfo.user_id;
        this.$createDialog({
            type: 'confirm',
            icon: 'cubeic-alert',
            title: '提示',
            content: '可参与竞价，确定认证为供应商？',
            onConfirm: () => {
                let re =  this.$axios.post('/login/sellerRegister',{
                  formData:formData
                }).then(function(re){
                    if(re.code == 200){
                        userInfo.user_type = 11;//供应商
                localStorage.setItem('userInfo',JSON.stringify(userInfo))
                            //   this.is_show = false
                            //   this.show_success = true
                            
                       that.$router.push({path:'/my/my'})

                        }else{
                            that.$createDialog({
                              type: 'alert',
                              title: '提示',
                              content: re.msg,
                              icon: ''
                             }).show()
                        }
                })
                 
            },
            onCancel: () => {
              this.$createToast({
                type: 'warn',
                time: 1000,
                txt: '未认证'
              }).show()
            }
          }).show()
          
      },

      getVal:function(e){
        var arr = this.msg;
        var obj = arr[e.currentTarget.getAttribute('data-index')]
        obj.val = e.target.value
        this.msg = arr
      },
      getVal2: function (e) {
        var arr = this.msg2;
        var obj = arr[e.currentTarget.getAttribute('data-index')]
        obj.val = e.target.value
        this.msg2 = arr
      },
     //所在省市区选择
      showAddressPicker() {
          this.addressPicker.show()
      },
      //所在省市选中
      addressSelect(selectedVal, selectedIndex, selectedText) {
          this.province_id = selectedVal[0]
          this.city_id = selectedVal[1]
          this.area_id = selectedVal[2]
          this.address_txt=selectedText.join(' ')

      },
      //上传那图片
      filesAdded(files) {
          //取图片文件，这里只取了数组中第一张图片
          const limitSize = 1 * 1024;
          const maxSize = 3 * 1024 * 1024;
          let hasIgnore = false
          for (let i = 0; i< files.length; i++) {
            const file = files[i];
            // 如果选择的图片大小最大限制（这里为3M）则弹出提示
            if(file.size > maxSize){
              file.ignore = true
               hasIgnore = true
            }
            
          }
            hasIgnore && this.$createDialog({
                  type: 'alert',
                  title: '提示',
                  content: '图片不能大于3M',
                  icon: ''
              }).show()

          // let fd = new FormData();
          // fd.append("fileData", files[0]);
          // let config = {
          //       headers:{'Content-Type':'multipart/form-data'}
          //     };      
          // this.$axios.post('/index/upfile',fd,config).then(function(data) {
          //     if(data.code==200){

          //     }

          // });

        },
        //图片上传成功 
          // yingyeImg: '',
          // zhengImg: '',
          // fanImg: '',
          // xvkeImg: '',
          // xvkeImg1:'',
        yingyeSuccess(res){
            if(res.response.code == 200){
                this.yingyeImg = res.response.data;
            }
        },
        zhengSuccess(res){
            if(res.response.code == 200){
                this.zhengImg = res.response.data;
            }
        },
        fanSuccess(res){
            if(res.response.code == 200){
                this.fanImg = res.response.data;
            }
        },
        xvkeSuccess(res){
            if(res.response.code == 200){
                 if(this.xvkeImg == ''){
                    this.xvkeImg = res.response.data;
                 }else{
                    this.xvkeImg1 = res.response.data;
                 }
            }
        },
        xvke1Success(res){
            if(res.response.code == 200){
                this.xvkeImg1 = res.response.data;
            }
        },
        delImg(key){
            if(key == 'xvkeImg' && this.xvkeImg == ''){
            this.xvkeImg1 = '';
            }
            this[key] = '';
        },
        checkboxChange() {
          this.checked = !this.checked
        
        },
  },
  mounted(){
    this.addressPicker = this.$createCascadePicker({
      title: '所在省市',
      data: addressData,
      onSelect: this.addressSelect,
      onCancel: this.cancelHandle
    })
            
  },
  components: {
  }
}
</script>